/**
* Description: 绑定人员
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="binding-user-dialog">
    <el-dialog
      title="绑定人员"
      v-model="dialogFormVisible"
      width="960px"
      :close-on-click-modal="false"
    >
      <div class="content">
        <!-- 头部搜索栏 -->
        <div class="state" style="width: 100%">
          <el-form :model="form" ref="formRef" inline class="rightForm">
            <el-form-item>
              <el-input
                style="width: 160px; height: 36px"
                placeholder="请输入账号或姓名"
                v-model="form.data.userName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="search-button" @click="getListData('search')">搜索</el-button>
              <el-button class="clear-button" style="margin-right: 20px" @click="resetData">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 数据展示部分 -->
        <div class="tablePage">
          <Table
            ref="tableRef"
            :not-data-img="$CONSTANTS.NOT_DATA_IMG"
            :table-columns="tableTitle"
            :remote-api="getBadgeUserListApi"
            :autoLoad="false"
            :pageNumberList="[10, 20, 50, 100]"
            ppageFieldName="page"
            pnumberFieldName="limit"
            @onLoaded="onLoaded"
            :fixedHeaderMaxHeight="540"
          >
            <template #index="scope">
              {{ scope.index + 1 }}
            </template>
            <template #radio="scope">
              <el-radio v-model="currentUser" :label="scope.row.subUserId">{{ }}</el-radio>
            </template>
          </Table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {IBaseQueryDataListParams} from "@/api";
import {
  type queryBadgeBindingUserListParamDTO,
  type badgeDetailDTO,
  type bindUserDataDTO,
  getBadgeUserListApi,
  bindUserApi
} from "@/api/badge";
import {type ITableColumnItem} from "@/components/common/Table.vue";
import $CONSTANTS from '@/constants/globalConstants';
import {ElMessage} from "element-plus";


const emit = defineEmits(['afterSubmit']);
const dialogFormVisible = ref<boolean>(false);
const currentUser = ref<number>();
const formRef = ref();
const tableRef = ref();
const badge = reactive<badgeDetailDTO>({
  id: 0
})

const form = reactive<IBaseQueryDataListParams<queryBadgeBindingUserListParamDTO>>({
  data: {
    userName: undefined,
    deptIdArrayList: undefined
  }
})
const tableTitle: Array<ITableColumnItem> = [
  {label: "序号", prop: "index", width: 80, template: true},
  {label: "", prop: "radio", width: 50, align: "center", template: true},
  {label: "姓名", prop: "subUserName"},
  {label: "账号", prop: "subUserAccount"},
  {label: "组织架构", prop: "hospitalDeptName"},
]
const init = (b: badgeDetailDTO) => {
  nextTick(() => {
    Object.assign(badge, b)
    getListData('search')
  })
}
const getListData = (type: string) => {
  if (type == 'search') {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}

const resetData = () => {
  form.data = {
    deptIdArrayList: [],
    userName: '',
  };
  getListData('search')
}
const onLoaded = () => {
  currentUser.value = undefined;
}

const submit = async () => {
  if (currentUser.value) {
    let param: bindUserDataDTO = {
      subUserId: currentUser.value,
      id: badge.id
    };
    let res = await bindUserApi(param);
    if (res.data.code == 0) {
      ElMessage.success('绑定成功');
      emit('afterSubmit', '')
      dialogFormVisible.value = false;
    }
  } else {
    ElMessage.error('请选择绑定人员');
  }
}
watch([dialogFormVisible], (newVal: Array<any>) => {
  if (newVal[0] === false) {
    currentUser.value = 0;
    form.data = {
      deptIdArrayList: [],
      userName: '',
    }
  }
})
defineExpose({
  dialogFormVisible,
  init
})
</script>

<style lang="scss" scoped>

.binding-user-dialog {
  .el-form-item {
    margin-bottom: 20px;
  }
  :deep(.el-dialog__body) {
    padding: 0 !important;
    height: 550px;
  }
}
</style>